<template>
  <a-card title="基本信息" :bordered="false">
    <a-spin :spinning="loading">
      <a-form-model
        ref="patientForm"
        :rules="rules"
        :model="currentPatient"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
      >
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="姓名" prop="patientName">
              <a-input v-model="currentPatient.patientName" placeholder="请输入患者姓名" />
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="性别" prop="patientSex">
              <a-select v-model="currentPatient.patientSex" placeholder="请选择性别">
                <a-select-option :value="1">男性</a-select-option>
                <a-select-option :value="2">女性</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="手机号码" prop="patientMobile">
              <a-input v-model="currentPatient.patientMobile" placeholder="请输入手机号码" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="8">
            <a-form-model-item label="出生日期">
              <a-date-picker
                style="width: 100%"
                :disabled-date="disabledDate"
                v-model="currentPatient.patientBirth"
                placeholder="请选择时间"
                @change="(date, dateString) => onChange(date, dateString, 'patientBirth')"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="身份证号" prop="patientIdCard">
              <a-input v-model="currentPatient.patientIdCard" placeholder="请输入身份证号" />
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="劳动强度">
              <a-select
                v-model="currentPatient.occupation"
                v-decorator="[
                  'LaborIntensity',
                  {
                    rules: [{ required: true, message: '劳动强度' }]
                  }
                ]"
                placeholder="请选择职业"
              >
                <a-select-option :value="1">轻体力劳动</a-select-option>
                <a-select-option :value="2">中体力劳动</a-select-option>
                <a-select-option :value="3">重体力劳动</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="8">
            <a-form-model-item label="文化程度">
              <a-select
                v-model="currentPatient.education"
                v-decorator="[
                  'Education',
                  {
                    rules: [{ required: true, message: '文化程度' }]
                  }
                ]"
                placeholder="请选择文化程度"
              >
                <a-select-option :value="1">未读</a-select-option>
                <a-select-option :value="2">小学</a-select-option>
                <a-select-option :value="3">初中</a-select-option>
                <a-select-option :value="4">高中</a-select-option>
                <a-select-option :value="5">中专</a-select-option>
                <a-select-option :value="6">大专</a-select-option>
                <a-select-option :value="7">本科</a-select-option>
                <a-select-option :value="8">硕士及以上</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="所属省份">
              <a-spin :spinning="provinceLoading">
                <a-select
                  v-model="currentPatient.provinceId"
                  placeholder="请选择所属省份"
                  @change="
                    () => {
                      currentPatient.cityId = null
                    }
                  "
                >
                  <a-select-option v-for="item in provinceList" :value="item.districtId" :key="item.districtId">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-spin>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="所属城市">
              <a-spin :spinning="cityLoading">
                <a-select v-model="currentPatient.cityId" placeholder="请选择所属城市">
                  <a-select-option v-for="item in cityList" :value="item.districtId" :key="item.districtId">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-spin>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="8">
            <a-form-model-item label="患者属性">
              <a-select
                v-model="currentPatient.patientProperty"
                v-decorator="[
                  'patientProperty',
                  {
                    rules: [{ required: true, message: '患者属性' }]
                  }
                ]"
                placeholder="请选择患者属性"
              >
                <a-select-option :value="1">门诊</a-select-option>
                <a-select-option :value="2">住院</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="医疗费别">
              <a-select
                v-model="currentPatient.payMode"
                v-decorator="[
                  'payMode',
                  {
                    rules: [{ required: true, message: '医疗费别' }]
                  }
                ]"
                placeholder="请选择医疗费别"
              >
                <a-select-option :value="1">社会医疗基本保险</a-select-option>
                <a-select-option :value="2">新型农村合作医疗保险</a-select-option>
                <a-select-option :value="3">城镇居民医疗保险</a-select-option>
                <a-select-option :value="4">商业保险</a-select-option>
                <a-select-option :value="5">公费医疗</a-select-option>
                <a-select-option :value="6">自费医疗</a-select-option>
                <a-select-option :value="7">其它</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="长期卧床">
              <a-select
                v-model="currentPatient.isSickbed"
                v-decorator="[
                  'isSickbed',
                  {
                    rules: [{ required: true, message: '长期卧床' }]
                  }
                ]"
                placeholder="请选择是否长期卧床"
              >
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="2">否</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="8">
            <a-form-model-item label="家属姓名">
              <a-input
                v-model="currentPatient.familyName"
                :max-length="10"
                v-decorator="[
                  'familyName',
                  {
                    rules: [{ required: true, message: '家属姓名' }]
                  }
                ]"
                placeholder="请输入家属姓名"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="与患者关系">
              <a-select
                v-model="currentPatient.familyRelation"
                v-decorator="[
                  'familyRelation',
                  {
                    rules: [{ required: true, message: '关系' }]
                  }
                ]"
                placeholder="请选择与患者关系"
              >
                <a-select-option :value="1">父亲</a-select-option>
                <a-select-option :value="2">母亲</a-select-option>
                <a-select-option :value="3">丈夫</a-select-option>
                <a-select-option :value="4">妻子</a-select-option>
                <a-select-option :value="5">爷爷</a-select-option>
                <a-select-option :value="6">奶奶</a-select-option>
                <a-select-option :value="7">外公</a-select-option>
                <a-select-option :value="8">外婆</a-select-option>
                <a-select-option :value="9">儿子</a-select-option>
                <a-select-option :value="10">女儿</a-select-option>
                <a-select-option :value="11">亲戚</a-select-option>
                <a-select-option :value="12">其它</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="家属手机号" prop="familyMobile">
              <a-input v-model="currentPatient.familyMobile" placeholder="请输入家属手机号" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="8">
            <a-form-model-item label="是否妊娠" v-if="currentPatient.patientSex == 2">
              <a-select
                v-model="currentPatient.gestation"
                v-decorator="[
                  'gestation',
                  {
                    rules: [{ required: true, message: '是否妊娠' }]
                  }
                ]"
                placeholder="请选择是否妊娠"
              >
                <a-select-option :value="0">无</a-select-option>
                <a-select-option :value="1">备孕中</a-select-option>
                <a-select-option :value="2">妊娠中</a-select-option>
                <a-select-option :value="3">哺乳期</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="妊娠日期" v-if="currentPatient.gestation == 3 && currentPatient.patientSex == 2">
              <a-date-picker
                style="width: 100%"
                :disabled-date="disabledDate"
                v-model="currentPatient.gestationDate"
                placeholder="请选择时间"
                @change="(date, dateString) => onChange(date, dateString, 'gestationDate')"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="简要病史">
              <a-textarea
                v-model="currentPatient.patientDesc"
                v-decorator="[
                  'patientDesc',
                  {
                    rules: [{ required: true, message: '编辑简要病史' }]
                  }
                ]"
                placeholder="请简要填写患者的病症时间、当前的诊疗情况（限100字以内）"
                :max-length="100"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="16">
            <a-form-model-item
              :label-col="{ sm: 3 }"
              prop="patientBodyImage"
              :rules="[{ required: false, message: '请上传体型照片' }]"
              label="体型照片"
            >
              <j-image-upload
                :is-multiple="true"
                :number="3"
                :preview="true"
                :img-arr="
                  Array.isArray(currentPatient.patientBodyImage)
                    ? currentPatient.patientBodyImage
                    : currentPatient.patientBodyImage
                    ? currentPatient.patientBodyImage.split(',')
                    : []
                "
                v-model="currentPatient.patientBodyImage"
              ></j-image-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" :offset="10">
            <a-button type="primary" @click="save" :loading="saveLoading">保存</a-button>
            <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="confirm">
              <template slot="title">
                <p>此操作代表你已完成了页面的填写，是否继续？</p>
              </template>
              <a-button type="primary" style="margin-left: 30px" :loading="saveLoading">确认完成</a-button>
            </a-popconfirm>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-card>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'BasicInfo',
  components: {},
  data() {
    return {
      loading: true,
      provinceLoading: true,
      cityLoading: false,
      saveLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      rules: {
        patientName: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
        // patientIdCard: [
        //   { required: false, message: '请输入正确的身份证号码', trigger: 'blur' },
        //   { validator: this.isRightIdNumber }
        // ],
        patientSex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        patientMobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: this.isRightMobileNumber }
        ]
        // familyMobile: [{ validator: this.isRightMobileNumber }]
      },
      currentPatient: {},
      provinceList: [],
      cityList: []
    }
  },
  created: function() {
    this.pageInit()
  },
  watch: {
    'currentPatient.provinceId': function(n) {
      n && this.getCity()
    }
  },
  methods: {
    async pageInit() {
      await this.getPatientInfo()
      await this.getProvince()
    },
    getPatientInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId
      }
      postAction('/100/12/1001202', params)
        .then(res => {
          if (res.success) {
            this.currentPatient = res.result[0]
          }
        })
        .finally(_ => {
          this.loading = false
        })
    },
    getProvince() {
      getAction('/dict/district/province')
        .then(res => {
          if (res.success) {
            this.provinceList = res.result
          }
        })
        .finally(_ => {
          this.provinceLoading = false
        })
    },
    getCity() {
      // this.currentPatient.cityId = null
      this.cityLoading = true
      getAction('/dict/district/city', {
        provinceId: this.currentPatient.provinceId
      })
        .then(res => {
          if (res.success) {
            this.cityList = res.result
          }
        })
        .finally(_ => {
          this.cityLoading = false
        })
    },
    check() {},
    save() {
      this.$refs.patientForm.validate(valid => {
        if (valid) {
          this.saveLoading = true
          console.log(this.currentPatient)
          let queryData = JSON.parse(JSON.stringify(this.currentPatient))
          if (this.currentPatient.patientSex == 1) {
            queryData.gestation = null
            queryData.gestationDate = null
          }
          if (this.currentPatient.gestation == 1 || this.currentPatient.gestation == 2) {
            queryData.gestationDate = null
          }
          postAction('/100/12/1001203', queryData)
            .then(res => {
              if (res.success) {
                this.$message.success('操作成功')
                this.getPatientInfo()
              } else {
                this.$message.error('操作失败')
              }
            })
            .finally(_ => {
              this.saveLoading = false
            })
        }
      })
    },
    confirm() {
      this.$refs.patientForm.validate(valid => {
        if (valid) {
          let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
          let params = {
            patientId: patientId,
            type: 1,
            isFinished: 1
          }
          this.saveLoading = true
          postAction('/100/12/1001207', params)
            .then(res => {
              if (res.success) {
                this.$message.success('页面已确认', 5)
              }
            })
            .finally(_ => {
              this.saveLoading = false
            })
        }
      })
    },
    onChange(date, dateString, field) {
      this.currentPatient[field] = dateString + ' 00:00:00'
    },
    isRightMobileNumber(rule, value, callback) {
      if (typeof value === 'undefined' || value === '') {
        callback()
      } else {
        const regex = /^1[3456789]\d{9}$/
        if (!regex.test(value)) {
          callback(new Error('请输入正确手机格式'))
        }
        callback()
      }
    },
    isRightIdNumber(rule, value, callback) {
      if (typeof value === 'undefined' || value === '') {
        callback()
      } else {
        const regex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        if (!regex.test(value)) {
          callback(new Error('请输入正确的身份证号'))
        }
        callback()
      }
    },
    disabledDate(current) {
      return current > moment().endOf('day')
    }
  }
}
</script>

<style lang="less" scoped></style>

